<template>
  <div class="app-container pagination">
    <el-card>
      <div class="header">
        <el-select v-model="search['status']" placeholder="开票状态" class="select" clearable @change="()=>pagination['load']()">
          <el-option :value="1" label="未开票"/>
          <el-option :value="2" label="已开票"/>
          <!--<el-option :value="3" label="已拒绝"/>-->
        </el-select>
        <el-select v-model="search['type']" placeholder="发票类型" class="select" clearable @change="()=>pagination['load']()">
          <el-option :value="1" label="个人"/>
          <el-option :value="2" label="企业"/>
        </el-select>
        <el-input v-model="search['search']" placeholder="请输入用户名称或手机号码" class="search-input"/>
        <el-button type="primary" icon="el-icon-search" @click="()=>pagination['load']()">搜索</el-button>
      </div>
      <ws-pagination v-model="pagination">
        <el-table-column prop="id" label="发票ID" min-width="150" header-align="center" align="center"/>
        <el-table-column label="发票类型" width="100" header-align="center" align="center">
          <template slot-scope="scope">
            <span v-if="scope['row']['type']===1">个人</span>
            <span v-else>企业</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="用户名" width="120" header-align="center" align="center"/>
        <el-table-column prop="mobile" label="手机" width="180" header-align="center" align="center"/>
        <el-table-column prop="dutyNumber" label="纳税识别号" min-width="180" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope['row']['dutyNumber']?scope['row']['dutyNumber']:'--' }}
          </template>
        </el-table-column>
        <el-table-column prop="money" label="实付金额" width="140" header-align="center" align="center"/>
        <el-table-column prop="createTime" label="申请时间" min-width="160" header-align="center" align="center"/>
        <el-table-column prop="status" label="状态" width="120" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status===1" type="danger">未开票</el-tag>
            <el-tag v-else-if="scope.row.status===2" type="success">已开票</el-tag>
            <el-tag v-else type="info">已拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <!--详情-->
            <router-link :to="`./details?id=${scope['row']['id']}`">
              <el-button size="small" type="primary" icon="el-icon-search" circle/>
            </router-link>
            <!--删除-->
            <el-button size="small" type="danger" icon="el-icon-delete" circle @click="deleteRow(scope['row'])"/>
          </template>
        </el-table-column>
      </ws-pagination>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'InvoiceList',
    components: {},
    data() {
      return {
        // 查询条件
        search: {
          // 搜索内容
          search: '',
          // 订单状态
          status: '',
          // 订单类型
          type: ''
        },
        pagination: {}
      }
    },
    watch: {},
    created() {
      // 初始化分页器
      this.initPagination();
    },
    methods: {
      // 初始化分页器
      initPagination() {
        // 创建分页器
        this.pagination = new this.$pagination(async (...args) => {
          // 加载分页列表
          const result = await this.$service.applicationGetInvoiceList({
            ...args[0],
            search: this.search.search,
            status: this.search.status,
            type: this.search.type
          });
          if (result.code !== 0) {
            return this.$message.error(result.msg || '系统错误');
          }
          return result;
        });
        // 加载分页数据
        this.pagination.load();
      },
      // 删除指定行
      deleteRow({id}) {
        this.$confirm('此操作将删除该开票申请, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: async (confirm) => {
            if (confirm === 'confirm') {
              const result = await this.$service.applicationDeleteInvoice({id: id});
              if (result.code === 0) {
                this.$message.success(`删除成功~`);
                // 加载分页数据
                this.pagination.load();
              } else {
                this.$message.error(result.msg);
              }
            }
          }
        });
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../styles/index.scss';
  .pagination {
    .header {
      .search-input {
        width: 240px;
        margin-right: 5px;
      }
      .el-select{
        width: 160px;
        margin-right: 20px;
      }
    }
  }
</style>
